<template>
    <div>
      <h1 style="background-color: aqua; height: 40px;"><p align="center">房号新增</p></h1>
      <table class="table table-bordered">
        <tbody class="bg-info">
            <tr>
                <td align="right">房号</td>
                <td>
                    <input type="text" v-model="info.HouseNumName">
                </td>
            </tr>
            <tr>
                <td align="right">地址</td>
                <td>
                    <input type="text" v-model="info.Addres">
                </td>
            </tr>
            <tr>
                <td align="right">电话</td>
                <td>
                    <input type="text" v-model="info.Phone">
                </td>
            </tr>
            <tr>
                <td align="right">图片</td>
                <td>
                    <input type="file" @change="img">
                    <img :src="info.Photo" width="100" height="100" v-if="info.Photo!=''">
                </td>
            </tr>
            <tr>
                <td align="right">状态</td>
                <td>
                    <input type="radio" v-model="info.State" name="state" :value="1">启用
                    <input type="radio" v-model="info.State" name="state" :value="0">禁用
                </td>
            </tr>
            <tr>
                <td align="right">时间</td>
                <td>
                    <input type="date" v-model="info.CreateTime">
                </td>
            </tr>
            <tr>
                <td align="right"></td>
                <td>
                    <input type="button" value="添加" class="btn btn-primay" @click="ok">
                </td>
            </tr>
        </tbody>
      </table>
    </div>
</template>

<script setup lang="ts">
import { ref,reactive,onMounted } from "vue";
import axios from 'axios';
import moment from 'moment';
import {useRouter,useRoute} from 'vue-router';
const route=useRoute();
const router=useRouter();


let info:any=reactive({

  "HouseNumName": "",
  "Addres": "",
  "Phone": "",
  "Photo": "",
   State:1,
  "CreateTime": "",
})

//=======上传图片============
const img=(e:any)=>{
    let obj=e.target.files[0];
    let f =new FormData();
    f.append("file",obj);

    axios({
        url:'https://localhost:7097/api/Img/Img',
        method:'post',
        data:f,
    })
    .then(res=>{
        console.log(res);
        if(res.data=='不是图片'){
            alert('图片格式不正确');
            return;
        }
        else if(res.data=='图片过大'){
            alert('图片大于1M');
            return;
        }
        else{
            info.Photo=res.data;
        }
    })
}
//===============添加======================
const ok=()=>{
    axios({
        url:'https://localhost:7097/api/House/AddHouseNum',
        method:'post',
        data:info,
    })
    .then(res=>{
        console.log(res);
        if(res.data>0){
            alert('添加成功');
            router.push('/houselist');
        }
        else if(res.data==-1){
            alert('房号重复');
            return;
        }
        else{
            alert('添加失败');
            return;
        }

    })
}

</script>

<style scoped>

</style>